<template>
    <div>
        <h1>Home 一级路由组件</h1>
        <span>
            <!-- query 传值 -->
            <router-link :to="{ name: 'nav', query: { shopList: shopListStr,id:shopList[0].id} }">
                导航
            </router-link>
        </span>
        <span>
            <router-link :to="{ name: 'shangpin',params:{id:shopList[1].id} }">
                商品
            </router-link>
        </span>
        <!-- 二级路由组件内容显示的位置 -->
        <router-view></router-view>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'

export default defineComponent({
    setup() {
        //创建一个数据，用于学习路由组件之间传值。
        const shopList = reactive([
            {
                id: '01',
                name: '休闲零食',
                price: '100元'
            },
            {
                id: '02',
                name: '数码电器',
                price: '1000元'
            },
            {
                id: '03',
                name: '家电',
                price: '10000元'
            }
        ])
        //注意：使用params传值和query传值，传一个对象的时候，要想将他转换成JSON字符串，在路由组件接收之后，再将其转换成对象格式
        // JSON.stringify()  将普通数据转换成 JSON 字符串 ；  JSON.parse()  将 JSON数据转换成普通数据
        //将对象转换成JSON字符串 传过去
        const shopListStr = JSON.stringify(shopList)

        return {
            shopList,
            shopListStr
        }
    }
})
</script>

<style scoped lang="scss">
span {
    margin: 0 20px;
}
</style>